<template>
  <div class='news'>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in news" :key="item.id">
        <!-- 每一条新闻点击都连接到新页面新闻详情页面，改成路由 ,传递id-->
        <router-link :to="'/newsinfo/'+item.id">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <div class="mui-ellipsis">
              <!-- 使用全局（main.js）过滤器处理时间格式，因为其他页面也需要处理 -->
              <span>发表时间：{{item.add_time|gettime}}</span>
              <span>点击{{item.click}}次</span>
              </div>
          </div>
        </router-link>
      </li>
		</ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      news:[],
    };
  },
  created(){
    this.getnews()
  },
  methods: {
    getnews(){
      this.$http.get('api/getnewslist').then(res=>{
        // console.log(res.body)
        this.news=res.body.message
      })
    }
  },
}
</script>
<style lang="less" scoped>

  .news{
    .mui-ellipsis{
      font-size: 12 px;
      display: flex;
      justify-content: space-between;
      color: rgb(146, 145, 145);
    }
  }
</style>